import 'package:demo/pages/goods_detail.dart';
import 'package:demo/pages/goods_list.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      // home: CustomPage()
      routes: {
        '/':(context)=>GoodsList(),
        '/detail':(context)=>GoodsDetail(),
      },
    ));
}

class CustomPage extends StatefulWidget {
  const CustomPage({super.key});
  @override
  State<CustomPage> createState() => _CustomPageState();
}

class _CustomPageState extends State<CustomPage> {
  int currentIndex = 0;
  List<BottomNavigationBarItem> tabbarList = [
    BottomNavigationBarItem(
      icon: Icon(Icons.home, size: 32),
      activeIcon: Icon(Icons.home, size: 32),
      label: '首页',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.connect_without_contact, size: 32),
      activeIcon: Icon(Icons.connect_without_contact, size: 32),
      label: '联系人',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.drive_eta, size: 32),
      activeIcon: Icon(Icons.drive_eta, size: 32),
      label: '朋友圈',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person, size: 32),
      activeIcon: Icon(Icons.person, size: 32),
      label: '我的',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 头部导航
      appBar: AppBar(
        centerTitle: true,
        title: Text('微信(0)', style: TextStyle(color: Colors.white)),
        backgroundColor: Colors.lightGreen,
      ),
      // 内容区域
      body: SafeArea(child: 
         IndexedStack(
          // 激活的索引
          index: currentIndex,
          // 所有要展示的页面
          children: [
              GoodsList(),
              GoodsDetail(),
              // GoodsList(),
              GoodsDetail(),
          ],
         )
      ),
      // 底部导航栏
      bottomNavigationBar: BottomNavigationBar(
        // 类型：固定
        type: BottomNavigationBarType.fixed,
        //  导航展示的每一项
        items: tabbarList,
        //  当前激活的索引
        currentIndex: currentIndex,
        //  图标的文字激活的颜色
        selectedItemColor: Colors.lightGreen,
        //  图标的文字未激活的颜色
        unselectedItemColor: Colors.grey,
        //  点击每一项的事件
        onTap: (int index) {
          setState(() {
            currentIndex = index;
          });
        },
      ),
    );
  }
}
